<template>
  <div style="height:100%;">
    <el-carousel height="100%">
      <el-carousel-item>
        <img src="../assets/image/banner.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/image/banner2.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/image/banner3.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/image/banner4.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/image/banner5.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/image/banner6.jpg" style="width:100%;height:100%;">
      </el-carousel-item>
    </el-carousel>

    <el-form :model="form" v-show="islogin" :rules="rules" ref="form" label-width="55px" class="demo-ruleForm login-container" style="margin:0 auto;position:absolute;top:250px;left:50%;margin-left:-175px;z-index:666">
      <h2 class="title">欢&nbsp;迎&nbsp;登&nbsp;录</h2>
      <el-form-item prop="username">
        <icon name="user" class="userIcon"></icon>
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" class="">
        <icon name="lock" class="passwordIcon"></icon>
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        <div style="text-align:right;color:#fff;cursor: pointer;position:absolute;right:0" @click="isLogni('form')">注册</div>
      </el-form-item>

      <el-button type="primary" @click="onSubmit('form')" class="subBtn" :loading="logining">登录</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form>

    <el-form :model="register" v-show="!islogin" :rules="sterrules" ref="register" label-width="55px" class="demo-ruleForm login-container" style="margin:0 auto;position:absolute;top:250px;left:50%;margin-left:-175px;z-index:666">
      <h2 class="title">欢&nbsp;迎&nbsp;注&nbsp;册</h2>
      <el-form-item prop="mobile">
        <icon name="mobile" class="userIcon"></icon>
        <el-input v-model="register.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="verifyCode " style="text-align:left">
        <icon name="user" class="userIcon"></icon>
        <el-input v-model="register.verifyCode" placeholder="请输入验证码" style="width:70%;"></el-input>
        <span v-show="showCode" class="vcode" @click="getCode">获取验证码</span>
        <span v-show="!showCode" class="vcode">{{count}} s</span>
      </el-form-item>
      <el-form-item  prop="type"  style="text-align:left;">
         <icon name="users" class="userIcon"></icon>
        <el-select v-model="register.type" placeholder="请选择企业/个人"  style="width:280px">
          <el-option label="企业用户" :value="1"></el-option>
          <el-option label="个人用户" :value="2"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item prop="name " v-show="register.type==2" style="text-align:left">
        <icon name="address-card" class="userIcon"></icon>
       <el-input v-model="register.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item prop="password" class="">
        <icon name="lock" class="passwordIcon"></icon>
        <el-input type="password" v-model="register.password" placeholder="请输入密码"></el-input>
        <div style="text-align:right;color:#fff;cursor: pointer;position:absolute;right:0" @click="isLogni('register')">登录</div>
      </el-form-item>

      <el-button type="primary" @click='registerSubmit("register")' class="subBtn" :loading="logining">注册</el-button>
      <el-button>重置</el-button>
    </el-form>
  </div>
</template>

<script>
import MenuUtils from "@/utils/MenuUtils";
var routers = [];
export default {
  data() {
    return {
      islogin: true,
      showCode: true,
      count: '',
      timer: null,
      photoValidate: "",
      photoValidateKey: "",
      phoneShow: false,
      logining: false,
      sending: false,
      form: {
        username: "",
        password: "",
      },
      register: {
        mobile: "",
        verifyCode: "",
        password: '',
        type:1,
        name:''
      },
      mobileRex: /^1[3|4|5|7|8]\d{9}$/,
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      sterrules: {
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
       
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      }
    };
  },
  created() {
    this.$store.state.routes.routes = {}
  },
  methods: {
    isLogni() {

      this.islogin = !this.islogin
    },
    getCode() {
      const TIME_COUNT = 60;
      if (this.register.mobile == '') {
        this.$message({
          message: '请先输入手机号',
          type: 'error'
        })
        return false
      } else if (!this.mobileRex.test(this.register.mobile)) {
        this.$message({
          message: '手机号输入错误',
          type: 'error'
        })
        return false
      } else if (!this.timer) {
        this.count = TIME_COUNT;
        this.getvifyCode()
        this.showCode = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showCode = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    getvifyCode() {
      this.$http('/sendVerifyCode', { data: { mobile: this.register.mobile } }).then(resp => {
        if (resp.code == 1) {
          this.$message({
            message: resp.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true;
          var obj = {
            data: {
              username: this.form.username,
              password: this.form.password
            }
          }
          this.$http('/loginAccount', obj).then(resp => {
            if (resp.code == 1) {
              
              // this.getMenu_sidebar();
              window.sessionStorage.setItem('username', this.form.username)
              window.sessionStorage.setItem("isShowPwd", false);
               window.sessionStorage.setItem('routeConst', true);
               window.sessionStorage.setItem('selectOoperate', JSON.stringify(resp.data))
              this.$router.push({ path: "/welcome" });
            } else {
              this.$message({
                message: resp.msg,
                type: 'error'
              })
            }
            this.logining = false;
          });
        } else {
          return false;
        }
      });
    },
    registerSubmit(register){
        if(this.register.type==2&&this.register.name==''){
               this.$message({
                message: '请输入姓名',
                type: 'error'
              })
              return false
          }
      this.$refs[register].validate(valid => {
        if (valid) {
          this.logining = true;
          var obj = {
            data: {
              mobile : this.register.mobile,
              verifyCode  : this.register.verifyCode ,
              type  : this.register.type,
              name  : this.register.name ,
              password  : this.register.password ,
            }
          }
        
          this.$http('/registerAccount', obj).then(resp => {
            if (resp.code == 1) {
              this.isLogni();
               this.$message({
                message: resp.msg,
                type: 'success'
              })
            } else {
              this.$message({
                message: resp.msg,
                type: 'error'
              })
            }
            this.logining = false;
          });
        } else {
          return false;
        }
      });
    },
    getMenu_sidebar() {
      this.$http('noAuth/user/authUrls.do').then(resp => {
        if (resp.code == 1) {
          //            列表权限开始----------------------------
          resp.data.indexOf('/sys/financingdayfee/list.do') > -1 ? this.$store.state.routes.routes.ywKouXi = true : this.$store.state.routes.routes.ywKouXi = false;


          this.$router.push({ path: "/welcome" });
        }
        window.sessionStorage.setItem('routeConst', JSON.stringify(this.$store.state.routes.routes))
      })
    },
    login(data) {
      window.sessionStorage.setItem("user", JSON.stringify(data));
      MenuUtils(routers, data);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.el-carousel {
  height: 100%;
}

.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  color: #fff;
  padding: 35px 35px 15px 35px;
  background-color: rgba(0, 0, 0, 0.5);
  /* border: 1px solid #eaeaea; */
  box-shadow: 0 0 25px #96bbe3;
}

.hides {
  display: none;
}

.login-container {
  margin-bottom: 0;
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #fff;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background: none;
}

.el-form-item {
  margin-bottom: 22px;
  margin-right: 15px;
}

.marginb {
  margin-bottom: 0 !important;
}

.subBtn {
  margin-left: 30px;
  margin-top: 22px;
}

.userIcon,
.passwordIcon,
.file-picture-o,
.mobile {
  transform: scale(1.6);
  position: absolute;
  left: -40px;
  top: 11px;
  color: #fff;
}

.file-picture-o {
  transform: scale(1.4);
}

.passwordIcon {
  top: 10px;
}

.mobile {
  transform: scale(2.2);
}

.photoValidate {
  width: 80px;
  line-height: 35px;
  height: 35px;
  background: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 20px;
  letter-spacing: 5px;
  font-weight: bold;
  border-radius: 5%;
}

.el-icon-refresh:hover {
  cursor: pointer;
}

.vcode {
  display: inline-block;
  text-align: center;
  width: 28%;
  background: #409eff;
  border-radius: 5px;
  cursor: pointer;
}
</style>
